<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="utf-8"
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>尚硅谷会员注册页面</title>

    <%@include file="/pages/common/head.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
    <%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
    <script type="text/javascript" src=<%=basepath+"static/script/regist.js"%>></script>
    <link rel="stylesheet" href=<%=basepath+"static/css/login.css"%>>
<%--    <script>--%>
<%--        $(function () {--%>
<%--            // 给注册绑定单击事件--%>
<%--            $("#login_button").click(function () {--%>
<%--                // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位--%>
<%--                //1 获取用户名输入框里的内容--%>
<%--                var usernameText = $("#username").val();--%>
<%--                //2 创建正则表达式对象--%>
<%--                var usernamePatt = /^\w{5,12}$/;--%>
<%--                //3 使用test方法验证--%>
<%--                if (!usernamePatt.test(usernameText)) {--%>
<%--                    //4 提示用户结果--%>
<%--                    $("span.errorMsg").text("用户名不合法！5-12位字母或数字");--%>

<%--                    return false;--%>
<%--                }--%>

<%--                // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位--%>
<%--                //1 获取用户名输入框里的内容--%>
<%--                var passwordText = $("#password").val();--%>
<%--                //2 创建正则表达式对象--%>
<%--                var passwordPatt = /^\w{5,12}$/;--%>
<%--                //3 使用test方法验证--%>
<%--                if (!passwordPatt.test(passwordText)) {--%>
<%--                    //4 提示用户结果--%>
<%--                    $("span.errorMsg").text("密码不合法！5-12位字母或数字");--%>

<%--                    return false;--%>
<%--                }--%>
<%--                // 验证确认密码：和密码相同--%>
<%--                //1 获取确认密码内容--%>
<%--                var repwdText = $("#repwd").val();--%>
<%--                //2 和密码相比较--%>
<%--                if (repwdText != passwordText) {--%>
<%--                    //3 提示用户--%>
<%--                    $("span.errorMsg").text("确认密码和密码不一致！");--%>

<%--                    return false;--%>
<%--                }--%>
<%--                var codeText = $("#code").val();--%>
<%--                codeText = $.trim(codeText);--%>
<%--                if (codeText == null || codeText == "") {--%>
<%--                    $("span.errorMsg").text("验证码不能为空！");--%>
<%--                    return false;--%>
<%--                }--%>
<%--                // 去掉错误信息--%>
<%--                $("span.errorMsg").text("");--%>
<%--            });--%>

<%--            $("#username").blur(function () {//失去焦点行为--%>
<%--                $.ajax({--%>
<%--                    type: "post",--%>
<%--                    url: "<%=basepath%>userServlet?action=ajaxExistUsername",--%>
<%--                    data: $('form').serialize(), //它可以把表单用name序列化成一个字符串--%>
<%--                    success: function (response, status, xhr) {--%>
<%--                        //console.log(response)--%>
<%--                        var jsonObj = JSON.parse(response);--%>
<%--                        //var jsonObj=$.parseJSON( response )--%>
<%--                        //console.log(typeof (jsonObj));--%>
<%--                        //console.log(jsonObj["existsUsername"]);//js中的json对象要这样读--%>
<%--                        if (jsonObj["existsUsername"]) {--%>
<%--                            $(".errorMsg").text("用户名不可用")--%>
<%--                        } else {--%>
<%--                            $(".errorMsg").text("用户名可用")--%>
<%--                        }--%>
<%--                    },--%>
<%--                    timeout: 10000, //如果超时1000毫秒，就结束--%>
<%--                    error: function (xhr, errorText, errorType) { //错误后的行为--%>
<%--                        console.log("errorText:" + errorText); //error--%>
<%--                        console.log("errorType:" + errorType); //not found--%>
<%--                        console.log("xhr.status:" + xhr.status); //404--%>
<%--                        console.log("xhr.statusText:" + xhr.statusText); //not found--%>
<%--                    },--%>
<%--                    dataType: "text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用--%>
<%--                })--%>
<%--            })--%>
<%--        })--%>
<%--    </script>--%>
</head>
<body>
<div class="container" style="width: 1000px;position: relative;top:40px">
    <form action=<%=basepath+"userServlet"%> role="form" class="form-horizontal" >
        <h1 class="text-center">CMDB</h1>
        <div class="col-md-4 col-md-offset-4" style="height: 30px;color: sandybrown">
            <span class="text-center glyphicon glyphicon-alert" id="msg">
                ${empty sessionScope.msgRegist?"请输入用户名":sessionScope.msgRegist} <%--用el表达式替换jsp表达式,短一点--%>
            </span>
            <a href="#" class="btn col-md-offset-5">登录</a>
        </div>
        <input type="hidden" name="action" value="regist">
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <input type="text" class="form-control loginInput" placeholder="username" id="name" name="username" autofocus
                <%--value="<%=request.getAttribute("username")==null?"":request.getAttribute("username")%>"--%>
                        value="${sessionScope.username}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                >
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <input type="password" class="form-control loginInput"   placeholder="password" name="password" id="password2"
                <%--value="<%=request.getAttribute("password")==null?"":request.getAttribute("password")%>"--%>
                       value="${sessionScope.password}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                >
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <input type="password" class="form-control loginInput"  placeholder="repwd" name="repwd" id="repwd"
                <%--value="<%=request.getAttribute("repwd")==null?"":request.getAttribute("repwd")%>"--%>
                       value="${sessionScope.repwd}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                >
            </div>
        </div>
        <div class="form-group ">
            <div class="col-md-2 col-md-offset-4 ">
                <input type="text" class="form-control loginInput"  placeholder="code" name="code" id="code"
                <%--value="<%=request.getAttribute("code")==null?"":request.getAttribute("code")%>"--%>
                       value="${sessionScope.code}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                >
            </div>
            <div class="col-md-2 col-lg-2 codeImg loginInput">
                    <img src="<%=basepath%>kaptcha.jpg" alt="code" id="code_img">
            </div>
            <script>
                $("#code_img").click(function (event){
                    this.src="<%=basepath%>kaptcha.jpg"//http://localhost:80/kaptcha.jpg
                })
            </script>
        </div>
        <div class="form-group">
            <div class="col-md-4 col-md-offset-4">
                <button class="btn btn-lg btn-primary btn-block col-md-4">提交</button>
            </div>
        </div>
    </form>
</div>

</body>
</html>